<template>
  <div>
    <div class="content-box">
      <div class="n-imgbox">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img :src="shuju.image" alt class="v-img" />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://kaola-pop.oss.kaolacdn.com/7f646cb4cebc4974a44f39121b05f689_800_800.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_75/format,webp"
              alt
              class="v-img"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://kaola-pop.oss.kaolacdn.com/be5c468963b745ffb0ed55bc53ea2aaf_800_800.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_75/format,webp"
              alt
              class="v-img"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://kaola-pop.oss.kaolacdn.com/3d1f5663de314365adfb22367e8c7519_800_800.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_75/format,webp"
              alt
              class="v-img"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://kaola-pop.oss.kaolacdn.com/9a7a61da2df6456a8fb32c1a87fc44cd_800_800.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_75/format,webp"
              alt
              class="v-img"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://kaola-pop.oss.kaolacdn.com/48392c3efe304c25960bcfba88a3abb2_800_800.jpg?x-oss-process=image/resize,w_750,h_0/quality,q_75/format,webp"
              alt
              class="v-img"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="n-price">
        <div class="n-price__left">
          <span class="curprice">
            ¥
            <i class="curnum">{{shuju.price}}</i>
            起
          </span>

          <span class="mrkprice">￥{{shuju.sales}}</span>
          <span class="huabeitag">3期免息</span>
          <span class="tag">特价</span>
        </div>
        <div class="n-price__right">收藏</div>
      </div>

      <div class="n-membertip">
        <div class="mline1">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/6dc03e40-5452-4a3e-a039-1ae8badbce2e_120_45.png?x-oss-process=image/resize,w_0,h_26/quality,q_90"
            alt
            class="micon"
          />
          <span class="maintxt">开通黑卡,下单预计省¥3,可得30元红包</span>
          <div class="pointbox">
            <img
              src="https://kaola-haitao.oss.kaolacdn.com/79336f9f-4623-47e8-ada8-7292668a8006_48_48.png?x-oss-process=image/resize,w_39,h_39/quality,q_100"
              alt
              class="mpoint"
            />
          </div>
        </div>

        <div class="mline2">
          <span class="subtxt"></span>
        </div>

        <div class="mlink">
          <span class="mtxt">立即开卡</span>
        </div>
      </div>

      <div class="activity-wrap">
        <ul class="n-similargoods">
          <li class="itm">
            <span class="bn-similar-text">10片装常规版</span>
            <span class="n-similar-price">|36元</span>
          </li>

          <li class="itm-n">
            <span class="bn-similar-text">新款第二件半价</span>
            <span class="n-similar-price">|59元</span>
          </li>
        </ul>
      </div>

      <h4 class="n-title">{{shuju.title}}</h4>
      <p class="n-subtit">发货以选择规格（加入购物车再下单）为准，不支持备注下单，如收到货后发现规格问题暂不支持退货退款，敬请谅解</p>

      <div class="n-tagbox">
        <div class="n-taginfo">
          <img
            class="v-flagimg"
            src="https://kaola-haitao.oss.kaolacdn.com/c0be3e6c11de4adb9ea90df712da9aea1419662386933i46mbwfo10003.png?x-oss-process=image/resize,w_32,h_0/quality,q_75"
            alt
          />
          <span class="tagtxt">韩国品牌</span>

          <img
            class="v-flagimg"
            src="https://kaola-haitao.oss.kaolacdn.com/13bd59e6e29a4f06b278c586629e690d.png?x-oss-process=image/resize,w_32,h_0/quality,q_75"
            alt
          />
          <span class="tagtxt">跨境商品</span>
        </div>
      </div>

      <p class="v-sperate"></p>
      <div class="n-huabeitip">
        <p class="v-line">
          <img
            class="v-tipimg"
            src="https://kaola-haitao.oss.kaolacdn.com/3685c82e-5dc7-4e13-b0af-e427485a33b5T2004212130_318_54.png"
            alt
          />

          <i class="v-pictext">
            <img
              class="v-tipimg"
              src="https://kaola-haitao.oss.kaolacdn.com/1943c266-fead-485e-99af-71c84c0ae5f7T2001191755_165_39.png"
              alt
            />
          </i>
        </p>

        <p class="v-line">
          <span class="v-detail">
            <font size="32px">
              <strong style="font-size:18px;">￥12</strong>
            </font>
            起x
            <font size="26px">
              <strong style="font-size:13px;">3期免息，预计可免0.83元</strong>
            </font>
          </span>
          <a class="v-goapp">享免息 去APP</a>
        </p>
      </div>
      <p class="v-sperate"></p>
      <ul class="n-activitybox">
        <li class="itm">
          <div class="name">请选择:</div>
          <div class="cnt">
            <p class="props">颜色</p>
          </div>
          <div class="v-linkicon"></div>
        </li>

        <li class="itm">
          <div class="name">促&nbsp;&nbsp;&nbsp;销:</div>
          <ul class="cnt">
            <li class="txt">满2件减24，满3件减43，满4件减59</li>
            <li class="txt">加入购物车，即可低价换购热销商品</li>
            <div class="v-linkicon"></div>
          </ul>
        </li>
        <!-- 配送地址 -->
        <li class="itm">
          <div class="name">配&nbsp;&nbsp;&nbsp;送：</div>

          <div>
            <van-field
              readonly
              required
              clickable
              label="选择地区"
              :value="valueArea"
              placeholder="请选择所在地区"
              @click="bindShow"
            />

            <!--选择省市区-->
            <van-popup v-model="showArea" position="bottom" :style="{ height: '40%' }">
              <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="bindCancel" />
            </van-popup>
          </div>

          <div class="v-linkicon"></div>
        </li>

        <li class="itm">
          <div class="name">运&nbsp;&nbsp;费:</div>
          <div class="cnt">
            <p class="props">免运费</p>
          </div>
          <div class="v-linkicon"></div>
        </li>

        <li class="itm">
          <div class="name">说&nbsp;&nbsp;明:</div>
          <van-notice-bar left-icon="volume-o" text="商品税费 不支持7天无理由退货  不支持7天无理由退货   ES海外专营店发货" />
        </li>
      </ul>
      <!--小伙伴说明轮播图 -->
      <div class="n-commentbox">
        <h4 class="tit">其他小伙伴们说(15301)</h4>
        <van-swipe @change="onChange">
          <van-swipe-item>收到了，快递很给力，还是正品哦 精华液很多....</van-swipe-item>
          <van-swipe-item>一直用他们家的面膜，已经不知道这是第几次买了，正品没错了！我是油皮，强烈推荐这两款！</van-swipe-item>
          <van-swipe-item>价格实惠，发货速度快，补水效果强力，喜欢，用完会持续回购</van-swipe-item>
          <van-swipe-item>从用了它再也没用其他牌子面膜，用了你会爱上它，已经N次回购了，面膜快用完了这次又囤了些</van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
        </van-swipe>
      </div>
      <p class="v-sperate"></p>
      <div class="n-brandboxZyStore">
        <a class="brandwrap-me">
          <img
            src="https://kaola-pop.oss.kaolacdn.com/a9cfb152-e599-4164-862e-5c120f6a18c5?x-oss-process=image/resize,w_100,h_0/quality,q_75/format,webp"
            alt
            class="v-brandimg-me"
          />
          <div>
            <p class="nameShop">ES海外专营店</p>
            <div class="v-picText">
              <span class="v-pic1"></span>
              <span>品牌商入驻</span>
            </div>

            <div class="v-picText">
              <span class="v-pic2"></span>
              <span>服务保障</span>
            </div>
          </div>
        </a>
        <ul class="v-num">
          <li class="item">
            <a class="brandwrap-me">
              <span class="count">202</span>
              <span class="txt">全部商品</span>
            </a>
          </li>
          <li class="item">
            <a class="brandwrap-me">
              <span class="count">4.86</span>
              <span class="u-scoreTag">高</span>
              <span class="txt">综合评分</span>
            </a>
          </li>
        </ul>
        <div class="v-btnDiv">
          <button class="u-btn2">查看分类</button>
          <button class="u-btn2">进店去看看</button>
        </div>
        <p class="v-sperate"></p>
        <a class="brandwrap">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/j0xgaj7240_120_120.jpg?x-oss-process=image/resize,w_100,h_0/quality,q_75/format,webp"
            alt
            class="v-brandimg"
          />
          <div>
            <p class="name">JMsolution</p>
            <p class="txt">
              在售商品
              <span class="num">512</span>
              件
            </p>
          </div>
          <div class="v-btn">进入品牌</div>
        </a>
      </div>

      <div class="n-recommendbox">
        <h4 class="tit">小袋袋推荐</h4>
        <div class="n-recommended-combination">
          <div class="n-grouprecommended">
            <div class="recommended-title">
              <p class="level-one">爆款精选护肤</p>
            </div>

            <div class="recommended-goods-double">
              <div class="recommended-goods-div-all">
                <img
                  src="https://kaola-pop.oss.kaolacdn.com/5b7498fc3066453cab7dc0e5409ba7b3_800_800.jpg?x-oss-process=image/resize,w_250,h_0/quality,q_75/format,webp"
                  alt
                  class="goods-pic"
                />
                <img
                  style="margin-left:40px"
                  src="https://kaola-pop.oss.kaolacdn.com/eb364ef3ccbf404783f4aa74e99a47c1_800_800.jpg?x-oss-process=image/resize,w_250,h_0/quality,q_75/format,webp"
                  alt
                  class="goods-pic"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="n-goodsdetailbar">
        <p class="txts">详情介绍</p>
        <img
          src="https://kaola-haitao.oss.kaolacdn.com/8cdd326d-c127-4f53-8183-85fac74233de.jpg?x-oss-process=image/resize,w_960,h_0/quality,q_75/format,webp"
          alt
          class="v-imgs"
        />
      </div>
      <div class="n-qualitybanner">
        <img
          src="//kaola-haitao.oss.kaolacdn.com/82c9e37c-672a-4f2c-92be-3da669715e65.png"
          alt
          class="v-imgt"
        />
      </div>
      <p class="v-sperate"></p>
      <!-- 回到顶部 -->
      <div class="goback" @click="goback">
        <div class="back">
          <p>顶部</p>
        </div>
      </div>
    </div>
    <div>
      <van-goods-action class="footer" :safe-area-inset-bottom="false">
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-goods-action-button type="danger" text="立即购买" @click="onClickButton(shuju)" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { CART_DATA } from "../../store/types";
import { Toast } from "vant";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);

import { mapState } from "vuex";
// vuex
import Vue from "vue";
// 轮播图
import { CellGroup, Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
// 城市配送
import { Area } from "vant";
Vue.use(Area);

// 弹出框
import { Popup } from "vant";
Vue.use(Popup);
import AeraInfo from "../../../public/data/data.js";
//说明
import { NoticeBar } from "vant";
Vue.use(NoticeBar);
//icon图标
import { Icon } from "vant";
import "vant/lib/icon/local.css";
Vue.use(Icon);

export default {
  components: {
    AeraInfo,
  },
  data() {
    return {
      current: 0,
      areaList: AeraInfo, //引用地区信息
      showArea: false,
      valueArea: "", //地区值
      arrArea: [], //存放地区数组
      shuju: {},
    };
  },

  mounted() {
    this.shuju = this.detail();
    // console.log(this.shuju);
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    bindShow() {
      this.showArea = true;
    },
    bindCancel() {
      this.showArea = false;
    },
    //地区选择
    onAreaConfirm(val) {
      this.showArea = false;
      this.arrArea = val;
      var addrInfo = val[0].name + "-" + val[1].name + "-" + val[2].name;
      this.valueArea = addrInfo;
    },
    goback() {
      let top = document.documentElement.scrollTop || document.body.scrollTop; //实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      });
    },
    detail() {
      let gid = this.$route.params.gid;
      let data = this.spSj.filter((item) => {
        return gid == item.gid;
      });
      return data[0];
    },
    onClickIcon() {
      Toast("请选择");
    },
    onClickButton(shuju) {
      // Toast("请进入购物车");
      // console.log(shuju,'shuju')
      this.$store.dispatch(CART_DATA, shuju);
      this.$router.push("/cart");
    },
  },
  computed: {
    ...mapState(["spSj"]),
  },
};
</script>

<style lang='scss' scoped>
.content-box {
  width: 100%;
  height: 1970px;
  _background: palegoldenrod;
  .n-imgbox {
    width: 100%;
    height: 400px;
    background: palegreen;
  }
  // 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    width: 100%;
    font-size: 20px;
    line-height: 400px;
    text-align: center;
    _background-color: #39a9ed;
    .v-img {
      width: 100%;
      margin: 0;
      background-size: 62px;
    }
  }
  .n-price {
    padding-left: 10px;
    height: 50px;
    line-height: 50px;
    width: 100%;
    font-size: 0;
    display: flex;
    .n-price__left {
      flex: 1;
      overflow: hidden;
      .curprice {
        font-size: 15px;
        color: #e31436;
        .curnum {
          font-size: 27px;
          font-weight: 700;
        }
      }
    }
    .mrkprice {
      text-decoration: line-through;
      margin-left: 8px;
      font-size: 13px;
      color: #999;
    }
    .huabeitag {
      display: inline-block;
      padding: 0 5px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      margin-left: 10px;
      vertical-align: 2px;
      font-size: 11px;
      color: #fff;
      border-radius: 3px;
      background: #ff9839;
    }
    .tag {
      display: inline-block;
      padding: 0 5px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      margin-left: 10px;
      vertical-align: 2px;
      font-size: 11px;
      color: #fff;
      border-radius: 3px;
      background: #ff8587;
    }
    .n-price__right {
      display: flex;
      align-items: center;
      font-size: 12px;
      margin-right: 16px;
      font-weight: 700;
      margin-top: 10px;
    }
  }

  .n-membertip {
    position: relative;
    margin: 5px 10px 10px;
    padding: 6px 60px 6px 10px;
    background: #f7f7f7;
    .mline1 {
      display: block;
      line-height: 21px;
      height: 21px;
      font-size: 0;
      white-space: nowrap;
      .micon {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        height: 15px;
        line-height: 15px;
        _float: left;
        margin: 1px 8px 0 0;
      }
      .maintxt {
        overflow: hidden;
        word-wrap: normal;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: -12px;
        display: inline-block;
        line-height: 21px;
        height: 21px;
        font-size: 12px;
        _float: left;
        color: #333;
      }
      .pointbox {
        display: inline-block;
        width: 33px;
        height: 13px;
        padding: 0 10px;
        _float: left;
        position: relative;
        top: 0;
        left: -5px;
        .mpoint {
          _width: 100%;
          height: 100%;
        }
      }
    }
    .mline2 {
      display: block;
      line-height: 21px;
      height: 21px;
      font-size: 0;
      white-space: nowrap;
      .subtxt {
        overflow: hidden;
        word-wrap: normal;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        line-height: 21px;
        font-size: 12px;
        color: #999;
        margin-right: 5px;
      }
    }
    .mlink {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 54px;
      width: 55px;
      background: #f3eee3;
      .mtxt {
        flex: 0 0 26px;
        line-height: 16px;
        font-size: 12px;
        color: #333;
      }
    }
  }

  .activity-wrap {
    margin: 0 0 15px;
    overflow: hidden;
    .n-similargoods {
      white-space: nowrap;

      width: max-content;
      padding-left: 10px;
      zoom: 1;
      .itm,
      .itm-n {
        display: inline-block;
        width: auto;
        margin-right: 5px;
        padding: 0 10px;
        position: relative;
        _float: left;
        border: 1px solid #ff8587;
        border-radius: 4px;
        color: #ff8587;
        font-size: 12px;
        .n-similar-text {
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-right: 5px;
          font-size: 12px;
        }
        .n-similar-price {
          font-size: 12px;
        }
      }
    }
  }

  .n-title {
    line-height: 18px;
    padding-top: 10px;
    margin: 0 10px 6px;
    font-size: 14px;
    color: #333;
    font-weight: 700;
    border-top: 1px solid #f0f0f0;
  }
  .n-subtit {
    padding: 0 12px;
    font-size: 13px;
    color: #333;
    line-height: 21px;
  }
  .n-tagbox {
    margin-bottom: 10px;
  }
  .n-taginfo {
    padding: 14px 0 14px 10px;
    margin: 10px 10px 0;
    background: #f7f7f7;
    zoom: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .v-flagimg {
      display: block;
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
    .tagtxt {
      margin-right: 10px;
      font-size: 12px;
      color: #666;
    }
  }
  .v-sperate {
    height: 10px;
    background: #f1f1f1;
  }
  .n-huabeitip {
    position: relative;
    padding: 10px 10px 3px 14px;
    .v-line {
      margin-bottom: 8px;
      height: 20px;
      line-height: 20px;
      .v-tipimg {
        display: inline-block;
        width: 106px;
        height: 18px;
        margin-right: 5px;
      }
      .v-pictext {
        display: inline-block;
        margin-right: 10px;
      }
    }
    .v-detail {
      font-family: PingFangSC-Regular;
      font-size: 13px;
      line-height: 0;
      color: #333;
    }
    .v-goapp {
      position: absolute;
      font-family: PingFangSC-Medium;
      font-size: 12px;
      color: red;
      right: 26px;
      bottom: 9px;
      height: 20px;
    }
  }
  .n-activitybox {
    padding: 0 10px;
    .itm {
      position: relative;
      padding: 9px 0;
      border-bottom: 1px solid #f0f0f0;
      zoom: 1;
      .name {
        float: left;
        height: 24px;
        line-height: 24px;
        font-size: 13px;
        color: #333;
      }
      .cnt {
        margin-left: 50px;
        padding-top: 3px;
        padding-right: 10px;
        .props {
          overflow: hidden;
          font-size: 13px;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
        }
      }
      .v-linkicon {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        margin-top: auto;
        margin-bottom: auto;
        background: url(//m.kaolacdn.com/goods/dist/m/img/producticon.b67ad86.png)
          no-repeat -64px -89px;
        background-size: 200px;
      }
      .txt {
        font-size: 12px;
        color: #ff8785;
        line-height: 22px;
      }
      .name {
        float: left;
        height: 24px;
        line-height: 24px;
        font-size: 13px;
        color: #333;
      }
    }
  }
  .n-commentbox {
    background: #fff;
    .tit {
      position: relative;
      height: 50px;
      line-height: 50px;
      padding: 0 10px;
      font-size: 14px;
      color: #333;
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .n-brandboxZyStore {
    background: #fff;

    .brandwrap-me {
      position: relative;
      display: block;
      padding: 0 10px;
      height: 59px;
      margin: 0 0 10px;
    }
    .v-brandimg-me {
      display: block;
      width: 50px;
      height: 50px;
      float: left;
      margin-right: 10px;
      border: 1px solid #f1f1f1;
      margin-top: 10px;
    }
    .nameShop {
      padding-top: 12px;
      width: 50%;
      font-family: PingFangSC-Medium;
      font-size: 15px;
      color: #333;
      line-height: 25px;
    }
    .v-picText {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #999;
      display: inline-block;
      margin-right: 25px;
      .v-pic1 {
        display: inline-block;
        height: 12px;
        width: 12px;
        background: url(//m.kaolacdn.com/goods/dist/m/img/producticon.b67ad86.png)
          no-repeat -150px -140px;
        background-size: 200px;
      }
      .v-pic2 {
        display: inline-block;
        height: 12px;
        width: 12px;
        background: url(//m.kaolacdn.com/goods/dist/m/img/producticon.b67ad86.png)
          no-repeat -153px -167px;
        background-size: 200px;
      }
    }
    .v-num {
      border-top: 1px solid #eaeaea;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      height: 61px;
      font-family: PingFangSC-Regular;
      .item {
        flex: 1;
        padding-top: 9px;
        text-align: center;

        .brandwrap-me {
          position: relative;
          display: block;
          padding: 0 10px;
          height: 59px;
          margin: 0 0 10px;
          .count {
            _display: block;
            font-size: 17px;
            line-height: 24px;
            color: #333;
          }
          .txt {
            display: block;
            font-size: 12px;
            color: #999;
          }
          .u-scoreTag {
            width: 28px;
            height: 28px;
            margin-top: -3px;
            font-size: 20px;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            border-radius: 50%;
            display: inline-block;
            color: #fff;
            background: #eb0e32;
          }
        }
      }
    }
    .v-btnDiv {
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      box-sizing: border-box;
      height: 52px;
      padding-top: 14px;
      padding-bottom: 15px;
    }
    .u-btn2 {
      width: 95px;
      height: 28px;
      margin: 0 12px;
      border: 1px solid #e31436;
      border-radius: 100px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      text-align: center;
      line-height: 27px;
      color: #e31436;
      background: #fff;
    }
    .brandwrap {
      position: relative;
      display: block;
      padding: 0 10px;
      height: 60px;
      margin: 0 0 10px;
      padding-top: 10px;
      .v-brandimg {
        display: block;
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 10px;
        border: 1px solid #f1f1f1;
      }
    }
    .name {
      padding-top: 4px;
      width: 50%;
      font-size: 13px;
      color: #333;
    }
    .txt {
      padding-top: 3px;
      font-size: 13px;
      color: #666;
      .num {
        color: #e31436;
      }
    }
    .v-btn {
      position: absolute;
      right: 10px;
      top: 21px;
      padding-left: 30px;
      height: 28px;
      line-height: 28px;
      width: 90px;
      border: 1px solid #ddd;
      color: #333;
      font-size: 12px;
      border-radius: 4px;
    }
  }
  .n-recommendbox {
    background: #fff;
    .tit {
      height: 32px;
      line-height: 32px;
      margin-top: 5px;
      padding: 0 10px;
      height: 32px;
      line-height: 32px;
      margin-top: 5px;
      padding: 0 10px;
      font-size: 14px;
      color: #333;
    }
    .n-recommended-combination {
      background: #fff;
      padding-top: 0.266667rem;
    }
    .n-grouprecommended {
      background-image: url(http://kaola-haitao.oss.kaolacdn.com/c349d47a-c3e1-4713-82c3-5849220d0f09_94_200.png);
      background-size: 100%;
      margin: 0 auto;
      width: 392px;
      height: 200px;
      padding-left: 0.266667rem;
      padding-bottom: 0.4rem;
      border-radius: 4px;
      background-color: #fff;
    }
    .recommended-title {
      text-align: center;
      padding-top: 0.413333rem;
      margin-bottom: 0.386667rem;
      padding-right: 0.266667rem;
    }
    .level-one {
      height: 29px;
      width: 180px;
      font-family: PingFangSC-Semibold;
      font-size: 19px;
      color: #fff;
      margin: 0 auto;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    // .recommended-goods-double {
    //   width: 381px;
    //   height: 244px;
    //   padding-left: 30px;
    // }

    .recommended-goods-div-all {
      position: relative;
      margin-left: 30px;
    }
    .goods-pic {
      border-top-right-radius: 4px;
      float: left;
      width: 143px;
      height: 143px;
      background: red;
      margin-bottom: 0.133333rem;
      background: url(//kaola-haitao.oss.kaolacdn.com/bf15f203-b93c-4949-a59b-2c4b68c23c5d.png)
        no-repeat 50%;
      background-size: 62px;
      background-color: rgba(0, 0, 0, 0.2);
      border-bottom: 0.5px solid #f0f0f0;
    }
    .current-tips {
      top: 2.933333rem;
      height: 0.533333rem;
      line-height: 0.533333rem;
    }
  }
  .n-goodsdetailbar {
    position: relative;
    height: 44px;
  }
  .txts {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
  }
  .v-imgs {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .v-imgt {
    width: 100%;
  }
  .goback {
    position: relative;
    margin-left: 370px;
    top: -100px;
  }
  .back {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    background: lightcoral;
    text-align: center;
  }
}
</style>
